<script setup>
import { onMounted, ref } from 'vue'
import Pagination from '@/components/pagination.vue'
import BindDialog from '@/components/Pet/bindDialog.vue'
import Edit from '@/components/Pet/edit.vue'

import { useRouter } from 'vue-router'
import { Plus, Refresh } from '@element-plus/icons-vue'

import { getPetList, deletePet, bindDevice, unbindDevice, getPetListByKey } from '@/api/pet'
import bus from '@/utils/bus';

const router = useRouter()

// 监听事件
bus.on('addPet', () => {
    getListData()
})
// 所需数据
const loading = ref(false)
const petList = ref([])
const page = ref(1)
const pageSize = ref(3)
const pageSizes = [3, 4, 5, 6]
const total = ref(0)

const editRef = ref()

const handleOpen = () => {
    editRef.value.open()
}

//获取列表
const getListData = async () => {
    loading.value = true
    try {
        const result = await getPetList(page.value, pageSize.value)
        console.log('result：', result);
        petList.value = result.data.list
        total.value = result.data.total
    } finally {
        loading.value = false
        search.value = ''
    }
}

const search = ref('')
// 搜索
const handleSearch = async () => {
    if (search.value.trim() === '') {
        ElMessage({
            message: '请输入搜索内容',
            type: 'warning'
        })
        return
    }

    loading.value = true
    try {
        const result = await getPetListByKey(page.value, pageSize.value, search.value)
        petList.value = result.data.list
        total.value = result.data.total
    } finally {
        loading.value = false
        search.value = ''
    }
}

//解除绑定
const handleUnBind = async (index, row) => {
    try {
        await unbindDevice(row.petId)
        ElMessage({
            message: '解除绑定成功',
            type: 'success'
        })
    } finally {
        getListData()

    }

}

// 删除宠物
const handleDelete = async (index, row) => {
    try {
        await deletePet(row.petId)
        ElMessage({
            message: '删除成功',
            type: 'success'
        })
    } finally {
        getListData()
    }
}

const handleLocation = async (index, row) => {
    router.push({
        path: `/location/id=${row.petId}`
    })
}

//分页逻辑
const handlePagination = () => {
    getListData()
}

const bindRef = ref()
// 绑定设备
const handleBind = (index, row) => {
    bindRef.value.open(row.petId)
}

onMounted(() => {
    getListData()
})

</script>
<template>
    <Edit title="添加宠物" ref="editRef"></Edit>
    <BindDialog ref="bindRef"></BindDialog>
    <div class="btn-group">
        <el-button type="primary" :icon="Plus" class="btn" @click="handleOpen">添加宠物</el-button>
        <el-button type="default" :icon="Refresh" class=btn @click="getListData">重置</el-button>
    </div>
    <el-table v-loading="loading" stripe :data="petList" style="width: 100%;">
        <el-table-column label="宠物名称" prop="petName" width="150px" />
        <el-table-column label="宠物图片" prop="url" width="200px">
            <template v-slot="{ row }">
                <img :src="row.url" alt="Avatar" class="avatar">
            </template>
        </el-table-column>
        <el-table-column label="宠物信息" prop="info" width="200px" />
        <el-table-column label="是否绑定设备" prop="bind" width="150px">
            <template v-slot="{ row }">
                <span v-if="row.bind">已绑定</span>
                <span v-else>未绑定</span>
            </template>
        </el-table-column>

        <el-table-column align="right">
            <template #header>
                <el-input v-model="search" size="small" placeholder="请输入搜索内容" @keyup.enter="handleSearch" />
            </template>
            <template #default="scope">
                <el-button size="small" class="btn" type="warning"
                    @click="handleLocation(scope.$index, scope.row)">查看位置</el-button>
                <el-button size="small" class="btn" type="success" @click="handleBind(scope.$index, scope.row)">
                    绑定设备
                </el-button>
                <el-button :disabled="!scope.row.bind" size="small" class="btn" type="primary"
                    @click="handleUnBind(scope.$index, scope.row)">
                    解除绑定
                </el-button>
                <el-button size="small" class="btn" type="danger" @click="handleDelete(scope.$index, scope.row)">
                    删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>
    <Pagination :hidden="petList.length" v-mode:page="page" v-model:pageSize="pageSize" :page_Sizes="pageSizes"
        :total="total" @pagination="handlePagination"></Pagination>
</template>

<style scoped lang='scss'>
.avatar {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 10px;
}

.btn-group {
    margin-bottom: 1rem;

}

table {
    .btn {
        padding: 12px;
    }
}
</style>